<template>
  <el-table height="400" style="width: 100%" :data="BillData" >
    <el-table-column
      fixed="left"
      prop="date"
      label="日期"></el-table-column>
    <el-table-column
      prop="studentID"
      label="学生编号"></el-table-column>
    <el-table-column
        label="科目号"
        prop="courseID"></el-table-column>
    <el-table-column
      prop="classroomID"
      label="班级代号"></el-table-column>
    <el-table-column
      prop="totalMoney"
      label="全部金额"></el-table-column>
    <el-table-column
      prop="amountPaid"
      label="已缴金额"></el-table-column>
    <el-table-column
      prop="isSubmited"
      label="是否交款"></el-table-column>
    <el-table-column
      label="催缴"><el-button plain @click="calls">催缴</el-button></el-table-column>
    <el-table-column
        label="修改账目"><el-button plain @click="visible = true">修改账目</el-button></el-table-column>
    <el-table-column
      label="打印"><el-button plain @click="mimeograph">打印</el-button></el-table-column>
  </el-table>
  <BillDialog total-money=3000 v-bind:visible="visible"></BillDialog>
</template>

<script>
import BillDialog from "../components/BillDialog.vue";
import {ref} from 'vue';

export default {
  name: "StudentBill",
  components: {
    BillDialog
  },
  setup() {
    let visible = ref(false);
    return {
      // BillData: [
      //   {
      //     studentID: 123,
      //     studentName: "王小虎",
      //     totalMoney: 3000,
      //     amountPaid: 2000,
      //     debtsFee: 1000
      //   }
      // ],
      visible,
    }
  },
  methods: {
    calls() {     //淡出催缴成功消息
      this.$alert('催缴成功', '通知', {
        confirmButtonText: '确定',
      });
    },
    mimeograph() {  //弹出打印成功消息
      this.$alert('打印成功', '通知', {
        confirmButtonText: '确定',
      });
    },
  }
}
</script>

<style scoped>

</style>